<template>
  <div class="logiAll">
    <div>
      <el-card class="box-card">
        <div><h2>登陆</h2></div>
        <div>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="userName">
              <el-input
                v-model="ruleForm.userName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="caro">
      <Carousel></Carousel>
    </div>
  </div>
</template>

<script>
import { loginUser } from "@/api/user";
import Carousel from "@/components/Carousel.vue";
import router from "@/router";
import Cookies from "js-cookie";
export default {
  components: {
    Carousel,
  },
  data() {
    var userName = (rule, value, callback) => {
      const regex = /^[A-Za-z0-9]+$/;
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else if (!regex.test(this.ruleForm.userName)) {
        callback(new Error("请输数字或字母"));
      }
      // else {

      if (this.ruleForm.userName !== "") {
        //     this.$refs.ruleForm.validateField('userName');
        //   }
        callback();
      }
    };

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };

    return {
      ruleForm: {
        usesrName: "",
        pass: "",
      },
      rules: {
        userName: [{ validator: userName, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        const ms = this;
        if (valid) {
          const params = {
            userName: this.ruleForm.userName,
            password: this.ruleForm.pass,
          };
          loginUser(params).then((res) => {
            //console.log(res);

            if (res.code === 0) {
              Cookies.set("expire", res.data.token, { expires: 3600 });
              router.push("/"); // 登录成功后，跳转到主页
            } else if (res.code == 1) {
              ms.$message.error(res.msg);
              //alert(result.data.msg)
            }
          });
          // axios({
          //     method:"post",
          //     url:"http://localhost:8081/user/loginUser",
          //     params:{
          //         userName: this.ruleForm.userName,
          //         password: this.ruleForm.pass
          //     },
          //     //responseType:"json"
          // }).then(function(result){
          //     //alert(result.data)
          //     console.log(result)
          //     if(result.status == 200){
          //         //console.log(result.data.code)
          //         //const vm = this;
          //         if(result.data.code == 0) {
          //             //vm.$router.push('/'); // 登录成功后，跳转到主页
          //             router.push('/');
          //         } else if(result.data.code == 1) {
          //             ms.$message.error(result.data.msg);
          //             //alert(result.data.msg)
          //         }
          //     }
          // })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.logiAll {
  height: 100%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background-color: rgb(243, 220, 220);
  flex-wrap: wrap;
}
.caro {
  width: 100%;
  margin-top: 2%;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 580px;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin-top: 10%;
}
</style>
